<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">
        <!-- App Favicon icon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">
        <!-- App Title -->
        <title>{{config('app.name')}}</title>

        <link href="{{asset('sharecar/assets/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/core.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/components.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/icons.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/pages.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/menu.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('sharecar/assets/css/responsive.css')}}" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="{{asset('sharecar/assets/js/modernizr.min.js')}}"></script>

    </head>


    <body>


        @include('sharecar.header')


        <div class="wrapper">
            <div class="container">

                <!-- Page-Title -->
                

                <div class="row">
                    <div class="col-sm-12">
                        
                            <div class="row">
                                <div class="col-lg-5 col-sm-12">
                                    

                                    <div class="table-responsive">
                                        <table class="table m-0">

                                            <thead>
                                        <tr>
                                          
                                          <th>Registration Number</th>
                                          <th>Make/Model</th>
                                          <th>Class</th>
                                          <th>Price/Mins</th>
                                          <th>Booking</th>
                                        </tr>
                                            </thead>
                                            <tbody id="carlist">
                                             
                                          
                                            
                                            </tbody>
                                        </table>
                                    </div>

                                </div>

                                <div class="col-lg-7 col-sm-12">
                                   <div id="map" style="height: 500px;"></div>

                                </div>
                            </div>
                        
                    </div>
                </div>



                


                


                


              

            </div> <!-- end container -->
        </div>
        <!-- end wrapper -->
<div class="modal fade" id="carModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-body">
              <div class="text-left">
                                        <p class="text-muted font-13"><strong>Registration Number :</strong> <span class="m-l-15" name="code"></span></p>

                                        <p class="text-muted font-13"><strong>Make/Mode :</strong><span class="m-l-15" name="model"></span></p>

                                        <p class="text-muted font-13"><strong>Clss :</strong> <span class="m-l-15" name="type"></span></p>

                                        <p class="text-muted font-13"><strong>Price/Mins :</strong> <span class="m-l-15" name="price"></span></p>

                                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary btn-save">Book</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


        <!-- jQuery  -->
        <script src="{{asset('sharecar/assets/js/jquery.min.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/bootstrap.min.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/detect.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/fastclick.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/jquery.slimscroll.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/jquery.blockUI.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/waves.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/wow.min.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/jquery.nicescroll.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/jquery.scrollTo.min.js')}}"></script>

        <!-- App core js -->
        <script src="{{asset('sharecar/assets/js/jquery.core.js')}}"></script>
        <script src="{{asset('sharecar/assets/js/jquery.app.js')}}"></script>

        <script type="text/javascript">
        var _car_id,map,markers = [];;
      function initMap() 
      {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -37.8134183, lng:144.9612273},
          zoom: 11
        });

       
       

        
        

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            getCars(pos.lng,pos.lat);
            map.setCenter(pos);
          }, function() {
            var lat = '-37.81224735868889';
            var lng = '145.05661176371825';
             getCars(lng,lat);
          });
        
        } else {
          
          var lat = '-37.81224735868889';
          var lng = '145.05661176371825';
          getCars(lng,lat);

        }        
      }

      function addMarker(lnglat,car_id)
      {
        
        var marker = new google.maps.Marker({
          position: lnglat,
          map: map,
          //title: 'Hello World!'
        });

        marker.addListener('click', function (e) {
                  
          getCarInfo(car_id);
          $('#carModal').modal('show');
               
        });


        markers.push(marker);
      }

      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }


      function clearMarkers()
      {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers()
      {
        setMapOnAll(map);
      }

      function deleteMarkers()
      {
        clearMarkers();
        markers = [];
      }

      function getCarInfo(car_id)
      {
        var url = "{{url('car-info')}}";
        var data = {};
        _car_id = car_id;
        data.car_id = car_id;
        $.get(url,data,function(rs){
          if(rs.status) {
            var info = rs.data;
            console.info(info);
            $('span[name="code"]').html(info.code);
            $('span[name="model"]').html(info.model);
            $('span[name="type"]').html(info.type.name); 
            $('span[name="price"]').html(info.type.price); 
            var lnglat = info.lnglat.split(',');
            var point = {};
            point.lng = Number(lnglat[0]);
            point.lat = Number(lnglat[1]);
            map.setCenter(point);
            map.setZoom(13);
          }
          
        })
      }

      $('#carlist').on('click','.btn-book',function(){
        var car_id = $(this).data('id');

        getCarInfo(car_id);
        $('#carModal').modal('show');
      })

      $('.btn-save').on('click',function(){      
        var url = "{{url('order-create')}}?car_id="+_car_id;       
        window.location.href = url;       
      })

      function getCars(lng,lat)
      {
        var url = "{{url('get-cars')}}";
        var data = {};
        data.lng = lng;
        data.lat = lat;
        $.get(url,data,function(rs){
          if(rs.data) {
            var cars = rs.data;
            $.each(cars,function(k,v){
              var lnglat = v.lnglat.split(',');
              var point = {};
              point.lng = Number(lnglat[0]);
              point.lat = Number(lnglat[1]);
              addMarker(point,v.id);  
              addList(v);
            })
          }
          
        })
      }

      function addList(data)
      {
        var str = '<tr><td>'+data.code+'</td>';           
            str += '<td>'+data.model+'</td>'     ;
            str += '<td>'+data.type.name+'</td>';
            str += '<td>'+data.type.price+'</td>'     ;
            str += '<td><button class="btn btn-primary btn-book" data-id="'+data.id+'" type="button">Book                                   </button></td>';
            str += '</tr>';
                                          
                                          
        $('#carlist').append(str);                                  
      }


     
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2yzJvOCp4RePF7iXFXRDrseLDkwTmjX0&callback=initMap"
    async defer></script>



    </body>
</html>